<extend name="Public/usercenter1"/>

<block name="style">
    <link href="__STATIC__/datetimepickerV3/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
</block>

<block name="body">
<div class="uc_config_info common_block_border clearfix col-xs-12 mt_0" style="padding-top:20px;padding-bottom: 20px;">
<form class="form-horizontal ajax-form " role="form" action="{:U('Usercenter/Config/edit')}" method="post">
<div class="has-feedback">
<div class="col-md-6 col-xs-12">
    <div class="form-group">
        <label for="name" class="control-label col-xs-3">姓名
            <ico>*</ico>
        </label>

        <div class="col-xs-9">
            <div style="width: 80%;display: inline-block">
                <input id="name" type="text" class="form-control form_check" name="name" check-type="Chinese"
                       value="{$member_info.name}"
                       placeholder="真实姓名">
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3">职业
            <ico>*</ico>
        </label>

        <div class="col-xs-9">
            <div style="width: 45%;display: inline-block">
                <select name="doing1" class="form-control form_check">
                    <volist name="doing" id="do">

                        <option value="{$do.id}"
                        <eq name="member_info.doing1" value="$do.id">selected</eq>
                        >{$do.title}</option>
                    </volist>
                </select>
            </div>
            +
            <div style="width: 45%;display: inline-block">
                <select name="doing2" class="form-control form_check" check-type="Select">
                    <volist name="doing" id="do">
                        <option value="{$do.id}"
                        <eq name="member_info.doing2" value="$do.id">selected</eq>
                        >{$do.title}</option>
                    </volist>
                </select>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3">性别
            <ico>*</ico>
        </label>

        <div class="col-xs-9">
            <div style="width: 80%;display: inline-block">
                <select name="sex" class="form-control form_check" check-type="Text">
                    <option value="1"
                    <eq name="member_info.sex" value="1">selected</eq>
                    >男</option>
                    <option value="0"
                    <eq name="member_info.sex" value="0">selected</eq>
                    >女</option>
                    <option value="-1"
                    <eq name="member_info.sex" value="-1">selected</eq>
                    >保密</option>
                </select>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3">民族
            <ico>*</ico>
        </label>

        <div class="col-xs-9">
            <div style="width: 80%;display: inline-block">
                <select name="national" class="form-control form_check" check-type="Select">
                    <volist name="national_list" id="vl">
                        <option value="{$vl.id}"
                        <eq name="member_info.national" value="$vl.id">selected</eq>
                        >{$vl.title}</option>
                    </volist>
                </select>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3">星座</label>

        <div class="col-xs-9">
            <div style="width: 80%;display: inline-block">
                <select name="sign" class="form-control form_check" check-type="Select" can-empty="1">
                    <volist name="sign" id="val">
                        <option value="{$key}"
                        <eq name="member_info.sign" value="$key">selected</eq>
                        >{$val}</option>
                    </volist>
                </select>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3">身高(cm)</label>

        <div class="col-xs-9">
            <div style="width: 80%;display: inline-block">
                <input id="height" type="text" class="form-control form_check" check-type="IntNum" check-value="20,249"
                       value="{$member_info.height}"
                       can-empty="1" name="height" placeholder="整数">
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3">体重(kg)</label>

        <div class="col-xs-9">
            <div style="width: 80%;display: inline-block">
                <input id="weight" type="text" class="form-control form_check" check-type="FloatNum" can-empty="1"
                       value="{$member_info.weight}"
                       name="weight" placeholder="例如：60.5">
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3">三围(cm)</label>

        <div class="col-xs-9">
            <div style="width: 80%;display: inline-block">
                <input id="bwh" type="text" class="form-control form_check" name="bwh" can-empty="1"
                       check-type="RegExps" reg-exp="^[0-9]*\/[0-9]*\/[0-9]*$" error-info="格式：胸围/腰围/臀围 90/75/90"
                       value="{$member_info.bwh}"
                       placeholder="胸围/腰围/臀围">
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3">地址
            <ico>*</ico>
        </label>

        <div class="col-xs-9">
            <div class="address" style="display: inline-block">
                {:hook('J_China_City',array('mark'=>'site','province'=>$member_info['site_province'],'city'=>$member_info['site_city'],'district'=>$member_info['site_area'],'no_need_check'=>1))}
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3">家乡</label>

        <div class="col-xs-9">
            <div class="address" style="display: inline-block">
                {:hook('J_China_City',array('mark'=>'home','province'=>$member_info['home_province'],'city'=>$member_info['home_city'],'district'=>$member_info['home_area'],'no_need_check'=>1,'can_empty'=>1))}
            </div>
        </div>
    </div>
    <style>
        .address {
            width: 140%;
        }

        @media (max-width: 768px) {
            .address {
                width: 100%;
            }

            .address select.the_last {
                margin-top: 10px;
            }

            .address .glyphicon {
                margin-top: 45px;
            }
        }

        .address select {
            width: 95px;
        }
    </style>


</div>
<div class="col-md-6 col-xs-12">
    <div class="form-group">
        <label class="control-label col-xs-3">生日
            <ico>*</ico>
        </label>

        <div class="col-xs-9">
            <div style="width: 80%;display: inline-block">
                <input type="text" name="birthday" class="form-control time form_check" check-type="Date"
                       value="{$member_info.birthday}"
                       placeholder="年-月-日">
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3">公司</label>

        <div class="col-xs-9">
            <div style="width: 80%;display: inline-block">
                <input id="company" type="text" class="form-control form_check" check-type="Text" can-empty="1"
                       value="{$member_info.company}"
                       name="company" can-empty="1"
                       placeholder="公司名称">
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3">手机</label>

        <div class="col-xs-9">
            <div style="width: 80%;display: inline-block">
                <input id="mobile" type="text" class="form-control form_check" check-type="Phone" name="mobile"
                       value="{$member_info.mobile}"
                       can-empty="1" placeholder="11位手机号码">
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3">Q Q
            <ico>*</ico>
        </label>

        <div class="col-xs-9">
            <div style="width: 80%;display: inline-block">
                <input id="qq" type="text" class="form-control form_check" name="qq" check-type="QQ"
                       value="{$member_info.qq}"
                       placeholder="Q Q号码">
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3">微信</label>

        <div class="col-xs-9">
            <div style="width: 80%;display: inline-block">
                <input id="wechat" type="text" class="form-control form_check" name="wechat" check-type="Text"
                       value="{$member_info.wechat}"
                       can-empty="1"
                       placeholder="微信账号">
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3">邮箱
            <ico>*</ico>
        </label>

        <div class="col-xs-9">
            <div style="width: 80%;display: inline-block">
                <input id="email" type="text" class="form-control form_check" name="email" check-type="Email"
                       value="{$member_info.email}"
                       placeholder="例：376728402@qq.com">
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3">微博</label>

        <div class="col-xs-9">
            {$weibo_address}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3">标签</label>

        <div class="col-xs-9">
            <div class="input-group" style="width: 80%">
                <input id="label" type="text" class="form-control" placeholder="最多添加6个标签">

                <div class="input-group-addon" style="width: 55px;"><a style="width: 100%;height: 100%" href="javascript:void(0);"
                                                  onclick="label_add()">添加</a></div>
            </div>
        </div>
    </div>
    <div class="form-group">

        <div class="col-xs-9 col-xs-offset-3">
            <div class="input-group" style="width: 90%">
                <input id="label_value" type="hidden" name="label" class="form-control" value="{$member_info.label}">
                <ul class="label_show">

                </ul>
            </div>
        </div>
    </div>
</div>
<div class="col-xs-12 submit" style="text-align: center">
    <button type="submit" name="submit" class="btn btn-default button_change">保存</button>
</div>
</div>
</form>
</div>
<style>
    .has-feedback .form-control {
        padding-right: 12px;
    }

    .label_show li {
        margin: 0 10px 10px 0;
        width: 100px;
        float: left;
    }

    .label_show li div {
        display: inline-block;
        background: #f36119;
        max-width: 100px;
    }

    .label_show li span.one_label {
        display: inline-block;
        padding: 5px;
        text-align: center;
        color: white;
        max-width: 80px;
    }
    .label_show li span.text-more{
        white-space: nowrap!important;
    }

    .label_show li a {
        padding: 5px 5px 5px 0;
        color: #B9B9B9 !important;
    }

    .label_show li a:hover {
        color: #B9B9B9 !important;
    }
</style>
<script type="text/javascript" src="__PUBLIC__/Core/js/form_check.js"></script>
<script type="text/javascript" src="__STATIC__/datetimepickerV3/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="__STATIC__/datetimepickerV3/js/locales/bootstrap-datetimepicker.zh-CN.js"
        charset="UTF-8"></script>
<script>

    var changePosition;
    if(document.body.offsetWidth>992){
        changePosition=83;
    }else if(document.body.offsetWidth>768){
        changePosition=220;
    }else{
        changePosition=0;
    }
    $('.time').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 4,
        keyboardNavigation: 1,
        changePosition: changePosition,
        minView: 2,
        top: 83,
        forceParse: 0,
        format: 'yyyy-mm-dd'
    });

    var label_num = 0;
    $(function(){
        var label_value = '{$member_info.label}';
        if (typeof(label_value) != 'undefined' && label_value != '') {
            var labels = label_value.split('|');
            for (var i = 0; i < labels.length; i++) {
                $.post(U('Usercenter/Config/get_label'), {id: labels[i]}, function (data) {
                    if (data.succ ==1) {
                        var html = '<li><div><span class="one_label text-more pull-left">' + data.title + '</span><a class="label_remove pull-left" data-value="'+data.id+'">X</a></div></li>';
                        $('.label_show').append(html);
                        label_num++;
                        label_remove();
                    }
                }, 'json')
            }
        }
    });

    function label_add() {
        if (label_num == 6) {
            toast.error('最多添加6个标签');
            return;
        }
        var title = $.trim($('#label').val());
        if (title == '' || typeof(title) == 'undefined') {
            toast.error("请输入标签！");
            return;
        }
        $.post(U('Usercenter/Config/label_add'), {title: title}, function (data) {
            if (data.succ !== 0) {
                var label_value = $('#label_value').val();
                $('#label').val('');
                if (typeof(label_value) != 'undefined' && label_value != '') {
                    var labels = label_value.split('|');
                    if (labels.indexOf(data.id) != -1) {
                        toast.error("已经拥有该标签！");
                        return;
                    } else {
                        label_value = label_value + '|' + data.id;
                        $('#label_value').val(label_value);
                        var html = '<li><div><span class="one_label text-more pull-left">' + data.title + '</span><a class="label_remove pull-left" data-value="'+data.id+'">X</a></div></li>';
                        $('.label_show').append(html);
                        label_remove();
                        label_num++;
                        toast.success("添加成功！");
                        return;
                    }
                } else {
                    label_value = data.id;
                    $('#label_value').val(label_value);
                    var html = '<li><div><span class="one_label text-more pull-left">' + data.title + '</span><a class="label_remove pull-left" data-value="'+data.id+'">X</a></div></li>';
                    $('.label_show').append(html);
                    label_remove();
                    label_num++;
                    toast.success("添加成功！");
                    return;
                }
            }
            if (data.succ === 0) {
                toast.error("添加失败！");
                return;
            }
        }, 'json')
    }

    function label_remove(){
        $(".label_remove").unbind('click');
        $(".label_remove").click(function(){
            var obj=$(this);
            var label_value = $('#label_value').val();
            var labels = label_value.split('|');
            var id=''+$.trim(obj.attr('data-value'));
            labels.splice(labels.indexOf(id),1);
            label_value=labels.join('|');
            $('#label_value').val(label_value);
            obj.parents('li').remove();
            label_num--;
            toast.success("移除成功！");
        });
    }
</script>
</block>